<template>
	<sw-common-frame :count="dataCount" :loading="loading">
		<template slot="button">
			<template v-if="isExistButton">
				<el-button size="small" type="primary" v-hasPermi="addedButton" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
				<el-divider direction="vertical"></el-divider>
			</template>
			<el-radio-group size="small" v-model="activeName">
				<el-radio-button label="1">黑名单</el-radio-button>
				<el-radio-button label="2">白名单</el-radio-button>
			</el-radio-group>
		</template>
		<el-form slot="query" size="small" inline v-if="isExistQuery">
			<el-form-item><el-input placeholder="请输入名称" v-model="queryData.name" clearable /></el-form-item>
			<el-form-item><sw-ip-input placeholder="请输入IP地址" v-model="queryData.ipAddr" clearable style="width: 120px" /></el-form-item>
			<el-form-item><el-button type="primary" icon="el-icon-search" @click="handleQueryTableData()">查询</el-button></el-form-item>
		</el-form>
		<el-table slot="table" v-bind="tableConfig" :data="tableData">
			<el-table-column label="序号" type="index" align="center" width="50" />
			<el-table-column prop="name" label="名称" min-width="180"></el-table-column>
			<el-table-column prop="ipAddr" label="IP地址" min-width="180"></el-table-column>
			<el-table-column prop="createName" label="创建人" min-width="136"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" min-width="170"></el-table-column>
			<el-table-column label="操作" fixed="right" :width="handleWidth" v-if="isHasAuthButton">
				<template slot-scope="{ row }">
					<el-button type="text" v-hasPermi="handleButtons.update" @click="handleOpenDialog(row.id)">修改</el-button>
					<el-button type="text" v-hasPermi="handleButtons.delete" @click="handleDeleteData(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<sw-pagination slot="page" :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData" />
		<form-dialog v-model="formDialog" :data-id="dataId" :type="activeName" @refresh="queryTableData()"></form-dialog>
	</sw-common-frame>
</template>

<script>
import formDialog from './form';
import listMixins from '@/mixins/listMixins';
import { getBlackPageList, deleteBlack } from '@/api/system/tbSysBlack';
export default {
	mixins: [listMixins],
	name: 'restrictionPage',
	components: { formDialog },
	data() {
		return {
			pageName: '访问限制',
			activeName: '1'
		};
	},
	computed: {
		listFunction() {
			return eval(getBlackPageList);
		},
		deleteFunction() {
			return eval(deleteBlack);
		},
		frameTopButton() {
			let frameTopBtns = [];
			if (!!this.addedButton) {
				frameTopBtns = [...frameTopBtns, this.addedButton];
			}
			return frameTopBtns;
		},
		requestParams() {
			return { ...this.queryData, type: this.activeName };
		}
	},
	watch: {
		activeName: {
			handler() {
				this.queryData.name = '';
				this.queryData.ipAddr = '';
				this.handleQueryTableData();
			},
			immediate: true
		},
		queryData: {
			handler(val) {
				console.log(val);
			},
			deep: true
		}
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
:deep(.apply_safe_body) {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 16px;
	flex: 1;
	overflow: hidden;
	.el-form {
		position: absolute;
		top: 16px;
		right: 16px;
		z-index: 1;
	}
	.el-form-item {
		margin-bottom: 0;
		&:last-child {
			margin-right: 0;
		}
	}
}
</style>
